<template>
  <div class="replyPage">
    <Row>
      <Col span="24" style="padding: 0;">
      <Card dis-hover style="font-size: 12px;">
        <p slot="title" style="color: rgb(102, 102, 102);">
          <Icon type="md-calendar"></Icon>
          <span style="font-size: 12px;margin-left: 2px;"> 流程排控</span>
        </p>
        <p slot="extra">
          <a href="#">
            <Tooltip content="流程校正" placement="bottom">
              <Button type="dashed" shape="circle" size="small" style="color: rgb(153, 153, 153);">
                <Icon type="md-repeat"></Icon>
              </Button>
            </Tooltip>
          </a>
        </p>
        <Row>
          <Col span="24">
          <Table :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
              <Button :icon="row.buttonicon" @click="showModal(row)" size="small"></Button>
              <Button v-if="row.buttonicon2" :icon="row.buttonicon2" size="small"></Button>
            </template>
          </Table>
          </Col>
        </Row>
      </Card>
      </Col>
      <!-- <Col span="24" style="padding-top: 10px;">

      </Col> -->
    </Row>
    <!-- 排控 -->
    <Modal v-model="modal1" draggable scrollable :mask="false" class-name="paikongModl" :title="orderRowData.order_no+'摄化流程排控操作'">
      <PaikongModal></PaikongModal>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import PaikongModal from './coms/paikongModal.vue'
  export default {
    components: {
      PaikongModal
    },
    data() {
      return {
        modal1: false,
        orderRowData: {},
        columns: [{
            title: '流程',
            key: 'liucheng',
            width: 100,
            render: (h, params) => {
              return h('span', [
                h('Icon', {
                  props: {
                    type: params.row.icontext
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  }
                }),
                h('span', {
                  style: {
                    color: '#415058'
                  }
                }, params.row.liucheng)
              ]);
            }
          },
          {
            title: '状态',
            key: 'zhuangtai',
            width: 80,
            render: (h, params) => {
              return h('span', {
                style: {
                  backgroundColor: params.row.zticontext,
                  color: '#fff'
                }
              }, params.row.zhuangtai)
            }
          },
          {
            title: '门店',
            key: 'mendian',
            width: 80,
          },
          {
            title: '员工',
            key: 'yuangong',
            width: 80,
          },
          {
            title: '排控档期',
            key: 'paikongdangqi'
          },
          {
            title: '完成时间',
            key: 'wanchengshijian'
          },
          {
            title: '备注',
            key: 'beizhu'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'right',
          }
        ],
        data: [{
            id: 0,
            liucheng: '下单',
            icontext: 'md-checkmark-circle-outline',
            zhuangtai: '已完成',
            zticontext: '#cccccc',
            mendian: '本店',
            yuangong: '心心',
            paikongdangqi: '24-01-24 18:28',
            wanchengshijian: '24-01-24 18:28',
            beizhu: '',
            buttonicon: 'ios-color-wand'
          },
          /* {
            id: 1,
            liucheng: '礼服',
            icontext: 'ios-bowtie',
            zhuangtai: '',
            zticontext: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '24-02-16 07:30',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          }, */
          {
            id: 2,
            liucheng: '摄化',
            icontext: 'logo-instagram',
            zhuangtai: '进行中',
            zticontext: '#00c15c',
            mendian: '本店',
            yuangong: '',
            paikongdangqi: '24-02-16 08:00',
            wanchengshijian: '',
            beizhu: '葛罗一对一拍摄当天早上试衣服 参与活动老师团队升一级外地顾客 连续三天',
            buttonicon: 'md-calendar',
            buttonicon2: 'md-checkbox-outline',
          },
          {
            id: 3,
            liucheng: '补拍',
            icontext: 'ios-camera-outline',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 4,
            liucheng: '重拍',
            icontext: 'ios-camera-outline',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 5,
            liucheng: '对比图',
            icontext: 'ios-images-outline',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 6,
            liucheng: '选片',
            icontext: 'ios-keypad-outline',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '24-02-17 13:00',
            wanchengshijian: '',
            beizhu: '暂定',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 7,
            liucheng: '精修',
            icontext: 'ios-images',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 8,
            liucheng: '看精修',
            icontext: 'ios-apps',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 9,
            liucheng: '设计',
            icontext: 'md-images',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 9,
            liucheng: '外发',
            icontext: 'md-open',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 10,
            liucheng: '回件',
            icontext: 'md-refresh',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 11,
            liucheng: '取件',
            icontext: 'logo-dropbox',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-flag-outline'
          },
          {
            id: 12,
            liucheng: '完成',
            icontext: 'ios-checkmark-circle-outline',
            zhuangtai: '',
            mendian: '',
            yuangong: '',
            paikongdangqi: '',
            wanchengshijian: '',
            beizhu: '',
            buttonicon: 'ios-color-wand'
          },
        ]
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        for (let key in this.orderRowData) {
          if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
            this.orderRowData[key] = ""
          }
        }
        console.log('orderRowData', this.orderRowData);
      }
    },
    created() {
      this.orderRowData = this.$store.state.layout.app.orderRowData
      for (let key in this.orderRowData) {
        if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
          this.orderRowData[key] = ""
        }
      }
    },
    methods: {
      showModal(row) {
        if (row.id === 2) {
          this.modal1 = true
        }
      },
      ok() {
        console.log(1111);
      },
      cancel() {
        this.modal1 = false
      }
    },
  }
</script>

<style scoped lang="less">
  .replyPage {
    height: 50vh;
    overflow: auto;

    .replyBtn {
      display: flex;
      justify-content: right;
      color: rgb(153, 153, 153);
      margin: 6px 0;
    }
  }
</style>
